<template>
		<block v-if="scrollView">
			<scroll-view
				:class="'mui mui-paper-root '+muiClasses+' elevation-'+elevation+' '+(square ? 'paper-square' : '')"
				:style="mStyle" :scroll-x="scrollX" :scroll-y="scrollY" :scroll-top="scrollTop"
				:scroll-left="scrollLeft" :scroll-into-view="scrollIntoView"
				:scroll-with-animation="scrollWithAnimation" :enable-flex="enableFlex" @scroll="_scroll">
				<slot />
			</scroll-view>
		</block>
		<block v-else>
			<view :class="'mui mui-paper-root '+muiClasses+' elevation-'+elevation+' '+(square ? 'paper-square' : '')"
				:style="mStyle">
				<slot />
			</view>
		</block>
</template>

<script>
	var styleProps = ['color', 'variant', 'size'];
	export default {
		name: "mui-paper",
		props: {
			mClass: {
				type: String,
				default: ''
			},
			mStyle: {
				type: String,
				default: ''
			},
			elevation: {
				type: Number,
				default: 1
			},
			variant: {
				type: String,
				default: 'elevation'
			},
			square: {
				type: Boolean,
				default: false
			},
			scrollView: {
				type: Boolean,
				default: false
			},
			scrollX: {
				type: Boolean,
				default: false
			},
			scrollY: {
				type: Boolean,
				default: true
			},
			upperThreshold: {
				type: Number,
				default: 50
			},
			lowerThreshold: {
				type: Number,
				default: 50
			},
			scrollTop: {
				type: Number,
				default: null
			},
			scrollLeft: {
				type: Number,
				default: null
			},
			scrollIntoView: {
				type: String,
				default: null
			},
			scrollWithAnimation: {
				type: Boolean,
				default: false
			},
			enableBackToTop: {
				type: Boolean,
				default: false
			},
			enableFlex: {
				type: Boolean,
				default: true
			},
			scrollAnchoring: {
				type: Boolean,
				default: false
			},
			refresherEnabled: {
				type: Boolean,
				default: false
			},
			refresherThreshold: {
				type: Number,
				default: 45
			},
			refresherDefaultStyle: {
				type: String,
				default: 'black'
			},
			refresherBackground: {
				type: String,
				default: '#FFF'
			},
			refresherTriggered: {
				type: Boolean,
				default: false
			},
			enhanced: {
				type: Boolean,
				default: false
			},
			bounces: {
				type: Boolean,
				default: true
			},
			showScrollbar: {
				type: Boolean,
				default: true
			},
			pagingEnabled: {
				type: Boolean,
				default: false
			},
			fastDeceleration: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		computed: {
			params() {
				const {
					color,
					variant,
					size,
					mClass
				} = this;
				return {
					color,
					variant,
					size,
					mClass,
				}
			}
		},
		watch: {
			params: {
				handler(val) {
					this._firstOberverForMuiClass = true;
					this._defindMuiBehaviors(val)
				},
				immediate: true,
			}
		},
		methods: {
			_defindMuiBehaviors: function _defindMuiBehaviors() {
				var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
				/** 整合所有样式 */
				var newData = {};
				var muiClassesArr = [];
				styleProps.forEach(function(sp) {
					muiClassesArr.push(params[sp] ? 'mui-' + sp + '-' + params[sp] : '');
				});
				if (params.mClass) {
					muiClassesArr.push(params.mClass);
				}
				var muiClasses = muiClassesArr.join(' ');
				this.$data.muiClasses=muiClasses;
				// newData.muiClasses = muiClassesArr.join(' ');
				// this.$set(this.$data, 'muiClasses', newData.muiClasses);
				//this.$data=newData;
			},
			_scroll: function _scroll(e) {
				this.triggerEvent('scroll', e.detail, {
					bubbles: true,
					composed: true,
					capturePhase: false
				});
			}
		}
	}
</script>

<style>

</style>